<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐云 - 我的喜欢</title>
    <link rel="stylesheet" href="../css/styles.css">
</head>
<body>
<div class="app-container">
    <!-- 侧边导航 -->
    <aside class="sidebar" id="sidebar">
        <div class="sidebar-content">
            <div class="logo">
                <div class="logo-icon">
                    <span class="icon icon-music text-white text-xl"></span>
                </div>
                <span class="logo-text">音乐云</span>
            </div>

            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="index.html" class="nav-link">
                        <div class="nav-icon"><span class="icon icon-list"></span></div>
                        <span class="nav-text">全部音乐</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="liked.html" class="nav-link active">
                        <div class="nav-icon"><span class="icon icon-heart"></span></div>
                        <span class="nav-text">我的喜欢</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="upload.html" class="nav-link">
                        <div class="nav-icon"><span class="icon icon-upload"></span></div>
                        <span class="nav-text">上传音乐</span>
                    </a>
                </li>
            </ul>

            <h3 class="category-title">音乐分类</h3>
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <div class="nav-icon"><span class="icon icon-microphone"></span></div>
                        <span class="nav-text">流行</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <div class="nav-icon"><span class="icon icon-guitar"></span></div>
                        <span class="nav-text">摇滚</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <div class="nav-icon"><span class="icon icon-headphones"></span></div>
                        <span class="nav-text">古典</span>
                    </a>
                </li>
            </ul>
        </div>

        <div class="user-profile">
            <div class="user-avatar">
                <span class="icon">👤</span>
            </div>
            <div class="user-info">
                <div class="user-name" id="user-name">游客用户</div>
                <div class="user-status" id="user-logout">退出登录</div>
            </div>
        </div>
    </aside>

    <!-- 主内容区 -->
    <main class="main-content">
        <!-- 顶部搜索栏 -->
        <header class="header">
            <button class="menu-toggle" id="menu-toggle">
                <span class="icon icon-bars"></span>
            </button>

            <div class="search-container">
                <span class="icon icon-search search-icon"></span>
                <input type="text" id="search-input" class="search-input" placeholder="搜索收藏的歌曲...">
            </div>

            <div class="header-actions">
                <button class="action-btn"><span class="icon icon-bell"></span></button>
                <button class="action-btn"><span class="icon icon-cog"></span></button>
            </div>
        </header>

        <!-- 页面内容 -->
        <div class="page-content">
            <div class="page-header">
                <h1 class="page-title">我的喜欢</h1>
                <p class="page-description">收藏的音乐都在这里</p>
            </div>

            <!-- 收藏音乐列表 -->
            <div class="music-list" id="liked-music-list">
                <!-- 音乐项由JS动态渲染 -->
            </div>
        </div>

        <!-- 底部播放器（移除封面图） -->
        <footer class="player">
            <div class="now-playing">
                <div class="now-playing-info">
                    <div class="now-playing-title" id="now-playing-title">未播放音乐</div>
                    <div class="now-playing-artist" id="now-playing-artist"></div>
                </div>
                <button class="like-btn" id="now-playing-like">
                    <span class="icon icon-heart"></span>
                </button>
            </div>

            <div class="player-controls">
                <div class="control-buttons">
                    <button class="control-btn"><span class="icon icon-random"></span></button>
                    <button class="control-btn"><span class="icon icon-step-backward"></span></button>
                    <button class="control-btn play-btn" id="play-pause-btn">
                        <span class="icon icon-play"></span>
                    </button>
                    <button class="control-btn"><span class="icon icon-step-forward"></span></button>
                    <button class="control-btn"><span class="icon icon-repeat"></span></button>
                </div>

                <div class="progress-container">
                    <span class="time-display" id="current-time">00:00</span>
                    <div class="progress-bar" id="progress-bar">
                        <div class="progress" id="progress-indicator"></div>
                    </div>
                    <span class="time-display" id="total-time">00:00</span>
                </div>
            </div>

            <div class="volume-control">
                <span class="icon icon-volume-up volume-icon"></span>
                <div class="volume-slider">
                    <div class="volume-level"></div>
                </div>
            </div>
        </footer>
    </main>
</div>

<!-- 音频元素 -->
<audio id="audio-player" preload="none">
    您的浏览器不支持音频播放
    ></audio>

<script src="../js/jquery.min.js"></script>
<script src="../js/common.js"></script>
<script src="../js/liked.js"></script>

</body>
</html>